iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 34

好記性的瀏覽器:localStorage

  • 分享至 

  • xImage
  •  

談這個主題之前,我們先來回憶一下日常的場景,你來到桃子購物網站,選了你要的商品往下捲動網頁,結果竟然發現網頁下方秀出你上次來買東西時,看的那幾樣商品,你心中覺得這個網站真貼心,好聰明。

然而,真正貼心、聰明的是你的瀏覽器。這功能叫做Web Storage,是HTML5之後出來的新技術,網頁可以透過JavaScript把你瀏覽的資料寫入瀏覽器裡儲存,可以儲存的資料容量有5mb大小。

Web Storage有兩種:

  • localStorage:如果沒有清除瀏覽器的話,資料將永久存在瀏覽器中,使用者關掉瀏覽器或分頁,資料仍會存在瀏覽器中,跨「瀏覽器分頁」也可以使用。
  • sessionStorage:使用者關掉瀏覽器或分頁,資料就會被清空。

如何看到localStorage的資料呢?

在Chrome瀏覽器按下F12,瀏覽器會分割稱瀏覽畫面跟Dev Tool,在Dev Tool那一邊點開Application分頁,就可以看到localStorage儲存的資料。

我們可以觀察到它是以Key - Value pair的方式儲存的,而且是以字串的格式儲存。

那要如何存入資料呢?我們可以使用setItem()方法:

localStorage.setItem(key, value)
sessionStorage.setItem(key, value)

取出資料則是使用getItem():

localStorage.getItem(key)
sessionStorage.getItem(key)

讓我們來看看如何實作:

<h2>報名參加華山論劍</h2>
    <input type="text" class="nameClass" />
    <input type="button" class="btnApply" value="報名" />
    <input type="button" class="btnCheck" value="檢查報名狀況" />
var apply= document.querySelector('.btnApply');
var check=document.querySelector('.btnCheck');

function applyTalk(e){
  var str= document.querySelector('.nameClass').value;
  localStorage.setItem('applyName',str);
}
apply.addEventListener('click',applyTalk);

check.addEventListener('click',function(e){
    var str = localStorage.getItem('applyName');
    alert(`${str},你已經報名成功!!!`)
})

前面有提到localStorage只接受字串(String)的資料,如果存的資料不是字串,而是陣列或是物件,就會發生問題。

如何解決這個問題呢?

  • 再用setItem()儲存資料到localStorage裡面的時候,要先用JSON.stringify()轉為字串。
  • 而用getItem()從localStorage取出資料時,要用JSON.parse()方法傳換為本來的資料格式。

讓我們來看一下怎麼做:

var island = [
    {
        islandName: '桃花島',
        owner: '黃藥師'
}
];

var islandStr = JSON.stringify(island);
console.log(islandStr);  //[{"islandName":"桃花島","owner":"黃藥師"}]
localStorage.setItem('islandItem',islandStr);
var getData = localStorage.getItem('islandItem');
console.log(typeof getData);  //string
var getDataAry = JSON.parse(getData);  //轉換為陣列
console.log(getDataAry); 

這就是localStorage的基本用法。


上一篇
「this」好七怪!
下一篇
最終章:Todo List實作
系列文
JavaScript老學徒筆記—馬步篇35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言